<template>
    <div class="page_wrapper">
        <div class="header">
            <img src="@/assets/merchant/title.png" alt="" />
            <text>机具统计</text>
        </div>
        <div class="card">
            <div class="tabs">
                <div class="item" @click="chooseActive('team')" :class="active === 'team' ? 'active' : ''">团队</div>
                <div class="item" @click="chooseActive('direct')" :class="active === 'direct' ? 'active' : ''">直营</div>
                <div class="item" @click="chooseActive('below')" :class="active === 'below' ? 'active' : ''">下级团队</div>
            </div>
            <div class="card-content">
                <div class="left">
                    <div class="top">
                        <div class="value">{{ sumCount }}</div>
                        <div class="label">机具总数</div>
                    </div>
                    <div class="bottom">
                        <div class="value">{{ activateCount }}</div>
                        <div class="label">已唤醒机具总数</div>
                    </div>
                    <div class="bottom">
                        <div class="value">{{ qualifyCount  }}</div>
                        <div class="label">已达标机具总数</div>
                    </div>
                </div>
                <div class="center"></div>
                <div class="left">
                    <div class="top">
                        <div class="value">{{ unBindCount }}</div>
                        <div class="label">机具库存总数</div>
                    </div>
                    <div class="bottom">
                        <div class="value">{{ unActivateCount }}</div>
                        <div class="label">待唤醒机具总数</div>
                    </div>
<!--                    <div class="bottom">-->
<!--                        <div class="value">{{ effectiveCount  }}</div>-->
<!--                        <div class="label">已有效机具总数</div>-->
<!--                    </div>-->
                </div>
            </div>
            <div class="catDetail" @click="navToName('/Statistics')">
                <div class="l">
                    <div class="label">已有效机具数</div>
                    <div class="value">{{ effectiveCount }}</div>
                </div>
                <div class="r">
                    <text>查看更多</text>
                    <img src="@/assets/merchant/toNext.png" alt="" />
                </div>
            </div>
        </div>
        <div class="pos-item" @click="navToName('/admin')">
            <img class="left" src="@/assets/posImg/jjlb.png" alt="" />
            <div class="center">
                <div class="label">机具列表</div>
                <div class="value">机具总数 {{ numAll || 0 }}</div>
            </div>
            <img class="right" src="@/assets/merchant/toNext4.png" alt="" />
        </div>
        <div class="pos-item" style="background: #fffbec" @click="navToName('/allot')">
            <img class="left" src="@/assets/posImg/jjxf.png" alt="" />
            <div class="center">
                <div class="label">机具下发</div>
                <div class="value">可下发 {{ allot || 0 }}</div>
            </div>
            <img class="right" src="@/assets/merchant/toNext4.png" alt="" />
        </div>
        <!--        <div class="pos-item" @click="navToName('/editRate')">-->
        <!--            <img class="left" src="@/assets/posImg/jjflgl.png" alt="" />-->
        <!--            <div class="center">-->
        <!--                <div class="label">机具费率管理</div>-->
        <!--                <div class="value">可调整 {{ PosCount || 0 }}</div>-->
        <!--            </div>-->
        <!--            <img class="right" src="@/assets/merchant/toNext4.png" alt="" />-->
        <!--        </div>-->
        <div class="pos-item" style="background: #fff5ed" @click="navToName('/sateActive')">
            <img class="left" src="@/assets/posImg/jjfwfgl.png" alt="" />
            <div class="center">
                <div class="label">机具服务费管理</div>
                <div class="value">可变更 {{ AcListCount || 0 }}</div>
            </div>
            <img class="right" src="@/assets/merchant/toNext4.png" alt="" />
        </div>
         <div class="pos-item" v-if="isShowSim==='yes'" style="background: #fffbec" @click="navToName('/setsimCard')">
            <img class="left" src="@/assets/posImg/hbjl.png" alt="" />
            <div class="center">
                <div class="label">SIM卡管理</div>
                <div class="value">可操作 {{ SimListCount || 0 }}</div>
            </div>
            <img class="right" src="@/assets/merchant/toNext4.png" alt="" />
        </div>
        <!--        <div class="pos-item" @click="navToName('/allotBank')">-->
        <!--            <img class="left" src="@/assets/posImg/xshb.png" alt="" />-->
        <!--            <div class="center">-->
        <!--                <div class="label">机具回拨</div>-->
        <!--                <div class="value">可回拨 {{ allotBack || 0 }}</div>-->
        <!--            </div>-->
        <!--            <img class="right" src="@/assets/merchant/toNext4.png" alt="" />-->
        <!--        </div>-->
    </div>
</template>

<script lang="ts" setup>
import {
    findSetPosFeeListCount,
    findSetPosActListCount,
    checkCanSimConfig,
    findSetPosSimListCount,
    findPageListCount,
    findByCanAllotCount,
    posCountStatistic,
    findCanallotBackCount
} from '@/api/pos'
import Router from '@/router'
const active = ref('direct')
const numAll = ref(0)
const allot = ref(0)
const PosCount = ref(0)
const AcListCount = ref(0)
const SimListCount = ref(0)
const allotBack = ref(0)
const activateCount = ref(0)
const qualifyCount = ref(0)
const bindCount = ref(0)
const sumCount = ref(0)
const unActivateCount = ref(0)
const unBindCount = ref(0)
const isShowSim = ref('')
const effectiveCount = ref(0)
const chooseActive = ac => {
    active.value = ac
    getPosCountStatistic()
}
const navToName = RouterName => {
    Router.push({
        path: RouterName
    })
}
const getPosCountStatistic = () => {
    posCountStatistic({
        type: active.value
    }).then(res => {
        activateCount.value = res.object.activateCount
        bindCount.value = res.object.bindCount
        sumCount.value = res.object.sumCount
        unActivateCount.value = res.object.unActivateCount
        unBindCount.value = res.object.unBindCount
        effectiveCount.value = res.object.effectiveCount
        qualifyCount.value = res.object.qualifyCount
    })
}
getPosCountStatistic()

//  获取变更费率终端数量
const getFindSetPosFeeListCount = () => {
    findSetPosFeeListCount({}).then(res => {
        PosCount.value = res.object
    })
}
//  活动变更数量
const getFindSetPosActListCount = () => {
    findSetPosActListCount().then(res => {
        AcListCount.value = res.object
    })
}
// 是否可操作sim
const getCheckCanSimConfig = () => {
    checkCanSimConfig().then(res => {
        isShowSim.value = res.object
        if (isShowSim.value === 'yes') {
            getFindSetPosSimListCount()
        }
    })
}
//  SIM卡数量
const getFindSetPosSimListCount = () => {
    findSetPosSimListCount({}).then(res => {
        SimListCount.value = res.object
    })
}
// 获取终端数量
const getFindPageListCount = () => {
    findPageListCount().then(res => {
        numAll.value = res.object
    })
}
//  获取可调拨终端数
const getFindByCanAllotCount = () => {
    findByCanAllotCount().then(res => {
        allot.value = res.object
    })
}
//  获取可回拨数量
const getFindCanAllotBackCount = () => {
    findCanallotBackCount().then(res => {
        allotBack.value = res.object
    })
}

getFindPageListCount()
getFindByCanAllotCount()
getFindCanAllotBackCount()
getCheckCanSimConfig()
getFindSetPosActListCount()
getFindSetPosFeeListCount()
</script>

<style scoped lang="scss">
.page_wrapper {
    height: 100%;
    width: 100%;
    padding: 10px;
    background: #ffffff;
    .header {
        display: flex;
        align-items: center;
        img {
            width: 22px;
            margin-right: 5px;
            height: 15px;
        }
        text {
            font-size: 16px;
            font-family: SimHei;
            font-weight: 400;
            color: #4d4d4d;
        }
    }
    .card {
        background: linear-gradient(156deg, #66d6ff 0%, #a9d0fe 100%);
        border-radius: 15px 15px 6px 6px;
        margin-top: 10px;
        padding: 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
        .tabs {
            display: flex;
            justify-content: space-between;
            width: 261px;
            height: 30px;
            background: #ffffff;
            padding: 3px;
            border-radius: 15px;
            .item {
                width: 33.3333%;
                display: flex;
                align-items: center;
                justify-content: center;
                color: #66d6ff;
                border-radius: 13px;
            }
            .active {
                background: #66d6ff;
                font-size: 14px;
                font-family: SimHei;
                color: #ffffff;
            }
        }
        .card-content {
            background: #e7efff;
            opacity: 1;
            margin-top: 10px;
            border-radius: 6px;
            padding: 15px 27px;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .center {
                width: 1px;
                height: 82px;
                background: #66d6ff;
            }
            .left {
                line-height: 20px;
                .value {
                    font-size: 16px;
                    font-family: DingTalk JinBuTi;
                    font-weight: 400;
                    color: #66d6ff;
                }
                .label {
                    font-size: 12px;
                    font-family: SimHei;
                    font-weight: 400;
                    color: #66d6ff;
                    opacity: 1;
                }
                .bottom {
                    margin-top: 10px;
                }
            }
        }
        .catDetail {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 10px;
            .l {
                display: flex;
                align-items: center;
                .value {
                    font-size: 16px;
                    font-family: DingTalk JinBuTi;
                    font-weight: 400;
                    color: #fffffe;
                    margin-left: 10px;
                }
                .label {
                    font-size: 14px;
                    font-family: SimHei;
                    font-weight: 400;
                    color: #fffffe;
                    opacity: 1;
                }
            }
            text {
                font-size: 14px;
                font-weight: 400;
                color: #ffffff;
            }
            img {
                width: 14px;
                height: 14px;
                margin-left: 5px;
            }
        }
    }
    .pos-item {
        display: flex;
        padding: 0 10px;
        align-items: center;
        background: #f6fafd;
        margin-top: 10px;
        border-radius: 6px;
        .left {
            width: 60px;
            height: 60px;
        }
        .center {
            flex: 1;
            padding: 10px;
            line-height: 25px;
            .label {
                font-size: 14px;
                font-family: Microsoft YaHei;
                font-weight: bold;
                color: #45454d;
                opacity: 1;
            }
            .value {
                font-size: 14px;
                font-family: SimHei;
                font-weight: 400;
                color: #a1a1b3;
                opacity: 1;
            }
        }
        .right {
            width: 14px;
            height: 14px;
        }
    }
}
</style>
